<template>
    <el-container>
      <el-main>
        <el-table :data="goodsList" style="width: 100%">
            <el-table-column fixed prop="id" label="id" width="60" />
            <el-table-column prop="title" label="标题" width="180" show-overflow-tooltip />
            <el-table-column prop="image" label="商品图" width="100" >
                <template #default="scope">
                    <div class="sa-flex sa-row-center">
                        <sa-preview :url="scope.row.image" size="40"></sa-preview>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="subtitle" label="描述" show-overflow-tooltip/>
            <el-table-column prop="status_text" label="状态" min-width="80"/>
            <el-table-column fixed="right" label="操作" width="120" >
            <template #default="scope">
                <el-button link type="danger" size="small"  v-auth="'seller.admin.service.selgoods'" @click="delGoods(scope.row.id)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
      </el-main>
      <el-footer class="sa-footer--submit">
        <el-button
          v-auth="'shop.admin.goods.service.edit'"
          type="primary"
          @click="confirm"
          >保存</el-button
        >
      </el-footer>
    </el-container>
  </template>
  <script setup>
    import { cloneDeep } from 'lodash';
    import { onMounted, reactive, ref, unref } from 'vue';
    import { ElMessage } from 'element-plus'
    import { api as goodsApi } from '@/app/shop/admin/goods/goods.service';
    const emit = defineEmits(['modalCallBack']);
    const props = defineProps({
      modal: {
        type: Object,
      },
    });
    const goodsList = ref([]);
    async function getGoodsList(ids) {
    const { data } = await goodsApi.goods.select(
      {
        search: JSON.stringify({ id: [ids, 'in'] }),
      },
      'select',
    );
    goodsList.value = data;
  }
  function delGoods(id){
    let indes = goodsList.value.findIndex(item => item.id == id)
    if(indes > -1){
      goodsList.value.splice(indes, 1)
    }
  }
  function confirm(){
    emit('modalCallBack', {
      event: 'confirm',
      data: cloneDeep(goodsList.value),
    });
  }
    onMounted(() => {
      // init();
      if(props.modal.params.ids){
        getGoodsList(props.modal.params.ids)
      }
      
    });
  </script>
  